<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>esd管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css"/>
    <style>
        .loginContainer {
            border-radius: 0.8vw;
            background-clip: padding-box;
            text-align: left;
            margin: 17vh auto auto;
            width: 18vw;
            padding: 1.5vh 1.8vw 1.5vh 1.8vw;
            background: aliceblue;
            border: 1px solid blueviolet;
            box-shadow: 0 0 25px #f885ff;
        }

        .loginTitle {
            margin: 0 auto 5vh auto;
            text-align: center;
            font-size: 2vw;
        }

        body {
            background-image: url("/backend/images/bg.jpeg");
        }
        #MyApp{
            margin: 0;
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;      /*水平居中*/
            align-items: center;          /*垂直居中*/
        }
    </style>
</head>

<body>
<div id="MyApp">
    <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer" @keyup.enter.native="submitLogin">
        <h3 class="loginTitle">
            ESD监控管理系统
        </h3>
        <el-form-item prop="username">
            <el-input type="text" v-model="loginForm.username" placeholder="亲，请输入用户名">
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="亲，请输入密码">
            </el-input>
        </el-form-item>
        <el-button type="primary" style="width:100% ; font-size: 0.8vw;" @click="submitLogin">登&nbsp;&nbsp;录</el-button>
    </el-form>
    <!-- <div style="position: absolute;bottom: 0.5vh; color: #45a4b2">
        <span style="font-size: 0.8vw;">@copy-right:&nbsp;&nbsp;东莞市泳进电子科技有限公司</span>
    </div> -->
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="/backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/backend/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/backend/plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el: '#MyApp',
        data() {
            return {
                captchaUrl: "",
                loginForm: {
                    username: "admin",
                    password: "123456",
                },
                rules: {
                    username: [{required: true, message: "请输入用户名", trigger: "blur"}, {
                        min: 5,
                        max: 14,
                        message: '长度在 5 到 14 个字符',
                        trigger: 'blur'
                    }
                    ],
                    password: [{required: true, message: "请输入密码", trigger: "blur"}, , {
                        min: 6,
                        message: '密码长度要大于6',
                        trigger: 'blur'
                    }],
                    code: [{required: true, message: "请输入验证码", trigger: "blur"}],
                }

            }
        },
        methods: {
            submitLogin() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        axios.post("/user/login", this.loginForm).then((res) => {
                            if (res.data.code === 0) {
                                //执行成功
                                //弹出成功提示信息
                                this.$message({
                                    type: 'success',
                                    message: res.data.msg
                                });
                                window.top.location.href = "/";
                            } else {
                                //执行失败
                                this.$message.error(res.data.msg);
                            }
                        });
                    } else {
                        this.$message.error('登录出错请重新输入');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>

</html>
